<template>
    <div class="page maintainEquipt-page" data-page="maintainEquipt" style="z-index: 2">
        <div class="link-page-nav">
            <a href="#" class="link" @click=$root.backToTab()> 
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top">
            <div class="link-page-title">待作业设备</div>
        </div>
        <div class="select-option-fixeds">
	        <div class="item-type-select" id="maintainEquiptPic_select_{{getNewId}}">
	            <div class="col" @click="selectCurrentType(1)">未完成</div>
	            <div class="col" @click="selectCurrentType(2)">已完成</div>
	        </div>
    	</div>
         <div class="page-content infinite-scroll-content ptr-content pdbottom120" style="margin-top: 0;"
            data-infinite-distance="50"   
            @infinite="loadMore" 
            @ptr:refresh="refreshList">
	        <div class="list media-list">
	           <ul id="maintainEquipt_dataList_{{getNewId}}"></ul>
	           <div class="preloader infinite-scroll-preloader" id="preloader_{{getNewId}}"></div>
	        </div>
        </div>
    </div>
</template>
    
<script>
    return {
    	mounted() {
    		var self = this;
            var app = self.$app;
    		self.taskId=this.$route.params.taskId;
    		self.status=this.$route.params.status;//0全部，1未完成，2已完成
    	},
        data : function() {
            return {
            	allowInfinite: true,
            	//taskId:1,
            	pageIndex:0,
                pageSize:25,
                getNewId: (new Date()).getTime()
            }
        },
        methods : {
        	//点击不同类型
        	selectCurrentType:function(tabId){
                var self = this;
                var $ = self.$$;
                jQuery("#maintainEquiptPic_select_" + self.getNewId + ">.col").removeClass('select').eq((tabId - 1)).addClass('select');
                self.tabId = tabId;
                self.pageIndex=0;
                self.pageSize=25;
                self.status = tabId;
                jQuery('#preloader_'+self.getNewId).hide();
                self.getListData();
            },
            getListData:function(){//获取列表数据
                common.loading(1);
                 var self = this;
                 var $ = self.$;
                 Dao.getMaintainAssetsListOfTask({
                 	userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                 	pageSize:self.pageSize,
                 	pageIndex:self.pageIndex,
                 	taskId:self.taskId,
                 	status:self.status,
                 },function(data,total) {
                     if(self.pageIndex==0){
                         $("#maintainEquipt_dataList_"+self.getNewId).empty();
                     }
                     if (data && data.length > 0){
                         if (self.pageSize * self.pageIndex + data.length < total) { //没分页
                             jQuery('#preloader_'+self.getNewId).show();
                             self.allowInfinite = true;
                         } else {  //有分页
                             jQuery('#preloader_'+self.getNewId).hide();
                             self.allowInfinite = false;
                         }
                         for (var i=0;i<data.length;i++) {
                             var image = staticPath+"img/emptyImg/smnoneImg.png";
                             $("#maintainEquipt_dataList_"+self.getNewId).append(`
                                 <li>
                                     <a href="/assetsDetail/` + data[i].assetsId + `/''/" class="item-link item-content" data-view=".view-main">
                                         <div class="item-inner" style="padding: 0;padding-top: 8px;">
                                         	<div class="item-subtitle assets-status">` +(0==0?`<span>在用</span>`:`<span>停用</span>`)+ `<span>`+data[i].assetsCategoryName+`</span></div>
                                             <div class="item-title-row" style="padding-right: 0;">
                                                 <div class="item-title decter-name-con">
                                                     <span class="decter-name">`+common.transNullundefinedToline(data[i].assetsName)+ `</span>
                                                 </div>
                                             </div>
                                             <div class="item-subtitle decter-mesage">` + common.transNullundefined(data[i].fbsName) + `</div>
                                         </div>
                                         <div class="decter-pic-con">
                                             <img id="vedio_image`+data[i].id+`" src="` + picDecterNo(data[i].assetsPic) + `" class="myicon" style="width: 60px;height: 60px;">
                                         </div>
                                     </a>
                                 </li>
                             `);
                            // if (data[i].assetsPics&&data[i].assetsPics.split(',').length > 0){
                            //     jQuery("#vedio_image"+data[i].id).off("click").on("click",{
                            //         'data':data[i].assetsPics.split(',')
                            //     },function(e) {
                            //         self.openVdPage(e.data.data);
                            //         e.stopPropagation();
                            //     });
                            // }
                        }
                     } else { //暂无数据
                         jQuery('#preloader_'+self.getNewId).hide();
                         self.allowInfinite = false;
                         if (self.pageIndex == 0) {
                              $("#maintainEquipt_dataList_"+self.getNewId).empty().append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                         }
                     }
                    common.loading(0);
                 });
            }, 
            loadMore:function(){
                var self = this;
                if (!self.allowInfinite) return;
                self.allowInfinite = false;
                setTimeout(function () {
                self.pageIndex++;
                self.getListData();
                self.allowInfinite = true;
                }, 1000);
            },
            refreshList: function (e, done) {
                if (done && e) {
                    var self = this;
                    var $ = self.$$;
                    setTimeout(function () {
                        self.reInit();
                        jQuery('#preloader_'+self.getNewId).hide();
                        self.getListData();
                        done();
                    }, 1000);
                }
            },
            reInit:function(){
                var self = this;
                self.pageIndex = 0;
                $("#page-content_"+self.getNewId).scrollTop(0,300);
                $("#maintainEquipt_dataList_"+self.getNewId).empty();
                if(!self.allowInfinite){
                    self.allowInfinite = true;
                    // $('#dataList_preloader').show();
                }
            },
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                self.selectCurrentType(self.status)
            },
            pageAfterIn:function (e, page) {
                    var self = this;
            }
        }
    }
</script>

<style scoped>
    .list ul:before,
    .list ul:after{
        height: 0 !important;
    }
    .select-option {
        padding: 10px 5px;
        font-size: 12px;
        z-index: 3;
        position: fixed;
        width: 100%;
        margin-top: 48px;
    }
    .moreDectorState-page{
            padding-top: 25px;
    }
    .item-title span {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 12px;
    }
    .decter-name{
        font-size: 16px !important;
    }
    .item-inner div{
        min-height: 20px;
        line-height: 25px; 
    }
    .assets-status span{
        color: #2471CA;
        padding-right: 10px;
    }
    .list .item-inner:after {
        background-color: transparent;
    }
</style>